﻿<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link rel="stylesheet" href="/admin_wechat/css/swiper.min.css">
	<title>排队进度</title>
	<script src="/admin_wechat/scripts/common/jquery.js"></script>
	<script src="/admin_wechat/scripts/common/ajax-data.js"></script>
	<script src="/admin_wechat/scripts/common/base.js"></script>
	<script src="/admin_wechat/scripts/common/dialog.js"></script>
	<script src="/admin_wechat/scripts/swiper.min.js"></script>
</head>
<style>
.title-line{height:50px;width:100%;border-bottom:1px solid #d7d7d7;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
.scroll-title{height:100%;width:68%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
.swiper-warpper{height:100%;width:68%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
.swiper-slide{height:100%;width:25%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:12px;font-weight:500;border-left:1px solid #d7d7d7;background-color:#f3f3f3;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.swiper-slide.on{height:100%;width:25%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:12px;font-weight:500;border:1px solid #fe7429;background-color:#fe7429;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.scroll-view{height:100%;width:25%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:12px;font-weight:500;border-left:1px solid #d7d7d7;background-color:#f3f3f3;position:relative}
.scroll-view.on{height:100%;width:25%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#fff;border:1px solid #fe7429;background-color:#fe7429;position:relative}
.allorder{height:100%;width:17%;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;background-color:#f3f3f3;position:relative}
.allorder.on{height:100%;width:17%;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;background-color:#fe7429;color:#fff;position:relative}
.right-icon{height:100%;width:12%;display:flex;justify-content:center;align-items:center;border-left:1px solid #d7d7d7;background-color:#f3f3f3}
.line-content{height:80px;width:96%;margin:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid #d3d3d3}
.line-number{margin-left:10px;margin-right:10px}
.times{display:flex;justify-content:center;align-items:center;font-size:12px;color:#b3b3b3;margin-left:5px;margin-top:5px}
.jiaohao{height:40px;width:40px;border-radius:50%;background-color:#fbae2e;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-left:10px;float:right}
.jiaohao-icon{height:20px;width:20px}
.jiaohao-span{font-size:12px;color:#fff}
.jiaohao-ready{height:40px;width:40px;border-radius:50%;background-color:#fd6f7f;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-left:10px;float:right}
.jiaohao-miss{height:40px;width:40px;border-radius:50%;background-color:#40a9ed;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-left:10px;float:right}
.howmany{height:15px;width:15px;border-radius:50%;background-color:silver;display:flex;justify-content:center;align-items:center;font-size:12px;color:#fff;position:absolute;top:3px;left:37px}
.howmany.on{height:15px;width:15px;border-radius:50%;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:12px;color:#fe7429;position:absolute;top:3px;left:37px}
.swiper-container{height:50px;width:71%;background-color:#f3f3f3}
*{font-family:"Microsoft YaHei"}
.no-data{line-height:40px}
.audio-msg { text-align:center;}
</style>
<body style="margin:0px;padding:0px;font-family: 'STHeiti','Microsoft YaHei',Helvetica,Arial,sans-serif;">
	<div class="title-line">
		<div class="allorder cate-item on" data-id="0">
			<span>全部</span>
			<div class="howmany total-nums">0</div>
		</div>
		<div class="swiper-container">
			<!--分类-->
			<div class="swiper-wrapper category">
			</div>

		</div>
		
		<div class="right-icon">
			<img class="" src="../../images/lineup/1.png" alt="">
		</div>
	</div>

    <!--音频控件-->
    <div class="audio" style="display:none;"></div>

	<div class="less2 list" id="list-item">
	
	</div>

	<script>
		var queueState = -1;    //状态
		var lineId = 0;         //排队项ID
		var arrQueueNums = [];	//排队数

		$(function () {
		    if (!toLogin()) return;
			loadCategory();
			loadList();
		})
	
		//分类
		function loadCategory() {
			AjaxStart(api_domain + "api/Restaurant/GetStoreLineItems?storeid=" + userid, "", function (data) {
				if (!isSuccess(data)) return;
				var list = data.Data;
				var html = "";
				for (var i = 0; i < list.length; i++) {
					var item = list[i];
					arrQueueNums[i] = { "id": item.Id, "nums": 0 };
					html += "<div class='swiper-slide cate-item' data-id='" + item.Id + "'><span>" + item.Name + "</span><div class='howmany item-nums-"+item.Id+"'>0</div></div>";
				}
				$(".category").html(html);
				bindCateBtn();
			})
		}

		//列表
		function loadList() {
		    AjaxStart(api_domain + "api/Restaurant/GetLineQueue?storeid=" + userid + "&lineId=" + lineId + "&queueState=" + queueState + "&pageSize=100&pageNumber=1", "", function (data) {
		        if (!isSuccess(data)) return;

		        var list = data.Data.Items;
		        //只显示等待或叫号的数据
		        if (list != null) {
		            for (var i = 0; i < list.length; i++) {
		                if (list[i].QueueState > 1) {
		                    list.splice(i, 1);
		                    i--;
		                }
		            }
		        }

		        loadNums(list);
		        $(".list").html(getListHtml(list));
		        bindListBtn();
		    })
		}

		function getListHtml(list) {
			if (list == null || list.length == 0) 
				return "<div class='no-data' style='text-align:center'>没有数据</div>";
			var html = "";
			for (var i = 0; i < list.length; i++) {
				var item = list[i];
				var state = "已等" + item.WaitingMins + "分钟";
				if (item.QueueState == 1)
					state = "正在叫号";
				else if (item.QueueState == 2)
					state = "正在用餐";
				else if (item.QueueState == 3)
					state = "已过号";
				html += "<div class='line-content'>";
				html += "<div class='line-number'>" + item.StartCode + item.LineNumber + "</div>";
				html += "<div class='times state-" + item.Id + "'>" + state + "</div>";
				html += "<div class='jiaohao' data-id='" + item.Id + "' data-src='" + item.VoiceSrc + "' data-state='1' style='background-color: #fbae2e;'><img class='jiaohao-icon' src='../../images/lineup/2.png'><span class='jiaohao-span'>叫号</span></div>";
				html += "<div class='jiaohao' data-id='" + item.Id + "' data-src='" + item.VoiceSrc + "' data-state='2' style='background-color: #fd6f7f;'><img class='jiaohao-icon' src='../../images/lineup/3.png'><span class='jiaohao-span'>就餐</span></div>";
				html += "<div class='jiaohao' data-id='" + item.Id + "' data-src='" + item.VoiceSrc + "' data-state='3' style='background-color: #40a9ed;' ><img class='jiaohao-icon' src='../../images/lineup/4.png'><span class='jiaohao-span'>过号</span></div>";
				html += "</div>";
			}
			return html;
		}

		//计数
		var isLoadNums = false;		//是否加载了统计数量
		function loadNums(list) {
			if (list == null || list.length == 0 || isLoadNums) return;
			var total = 0;
			for (var i = 0; i < list.length; i++) {
				var lineId = list[i].LineItem.Id;
				for (var j = 0; j < arrQueueNums.length; j++) {
					var obj = arrQueueNums[j];
					if (obj.id == lineId) {
						obj.nums++;		//按桌计数		
						total++;		//总数
						break;
					}
				}
			}

			//显示计数
			for (var j = 0; j < arrQueueNums.length; j++) {
				var item = arrQueueNums[j];
				$(".item-nums-" + item.id).html(item.nums);
			}
			$(".total-nums").html(total)
			isLoadNums = true;	
		}
	
		//更改状态
		function changeState(id, state, voiceSrc) {
		    AjaxStart(api_domain + "api/Restaurant/UpdateLineQueueState?id=" + id + "&queueState=" + state, "", function (data) {
		        if (!isSuccess(data)) return;
		        Alert("操作成功");
		        if (state == 1) {
		            playAudio(voiceSrc);    //播放叫号音乐
		        }
		        loadList();
		    });
		}

        //播放音频
		function playAudio(voiceSrc) {
		    $(".audio").html("<audio id='audio' controls><source src='" + voiceSrc + "' type='audio/mpeg'>你的浏览器不支持html5的audio标签</audio>");
		    var audio = document.getElementById('audio');
		    audio.loop = false;
		    audio.play();
		    //audio.addEventListener('ended', function () {
		    //    $(".audio-msg").html("播放完成")
		    //}, false);		    
		}
		
		//绑定分类事件
		function bindCateBtn() {
			$(".cate-item").click(function () {
				arrQueueNums = [];					//重置计数
				lineId = $(this).attr("data-id");	//切换ID		
				loadList();

				$(".cate-item").removeClass("on");
				$(".cate-item").find(".howmany").removeClass("on");
				$(this).addClass("on");
				$(this).find(".howmany").addClass("on");
			})

			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4,
				spaceBetween: 0
			});
		}

		//绑定列表事件
		function bindListBtn() {
		    $(".jiaohao").click(function () { changeState($(this).attr("data-id"), $(this).attr("data-state"), $(this).attr("data-src")) });
		}
	</script>
</body>
</html>



